<!--<template>-->
<!--  <div style="position: relative" ref="wrapElRef">-->
<!--    <div-->
<!--      v-if="type === '2'"-->
<!--      class="verify-img-out"-->
<!--      :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"-->
<!--    >-->
<!--      <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">-->
<!--        <img-->
<!--          :src="'data:image/png;base64,' + backImgBase"-->
<!--          alt=""-->
<!--          style="width: 100%; height: 100%; display: block"-->
<!--        />-->
<!--        <div class="verify-refresh" @click="refresh" v-show="showRefresh">-->
<!--          &lt;!&ndash; <i class="iconfont icon-refresh"></i> &ndash;&gt;-->
<!--          <a-icon type="reload" class="iconfont" />-->
<!--        </div>-->
<!--        <transition name="tips">-->
<!--          <span class="verify-tips" v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'">-->
<!--            {{ tipWords }}-->
<!--          </span>-->
<!--        </transition>-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 公共部分 &ndash;&gt;-->
<!--    <div-->
<!--      class="verify-bar-area"-->
<!--      :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"-->
<!--    >-->
<!--      <span class="verify-msg" v-text="text"></span>-->
<!--      <div-->
<!--        class="verify-left-bar"-->
<!--        :style="{-->
<!--          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,-->
<!--          height: barSize.height,-->
<!--          'border-color': leftBarBorderColor,-->
<!--          transaction: transitionWidth,-->
<!--        }"-->
<!--      >-->
<!--        <span class="verify-msg" v-text="finishText"></span>-->
<!--        <div-->
<!--          class="verify-move-block"-->
<!--          @touchstart="start"-->
<!--          @mousedown="start"-->
<!--          :style="{-->
<!--            width: barSize.height,-->
<!--            height: barSize.height,-->
<!--            'background-color': moveBlockBackgroundColor,-->
<!--            left: moveBlockLeft,-->
<!--            transition: transitionLeft,-->
<!--          }"-->
<!--        >-->
<!--          &lt;!&ndash; <i-->
<!--            :class="['verify-icon iconfont', iconClass]"-->
<!--            :style="{color: iconColor}"></i> &ndash;&gt;-->
<!--          <a-icon :type="iconType" :class="['verify-icon']" :style="{ color: iconColor }" />-->
<!--          <div-->
<!--            v-if="type === '2'"-->
<!--            class="verify-sub-block"-->
<!--            :style="{-->
<!--              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',-->
<!--              height: setSize.imgHeight,-->
<!--              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',-->
<!--              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,-->
<!--            }"-->
<!--          >-->
<!--            <img-->
<!--              :src="'data:image/png;base64,' + blockBackImgBase"-->
<!--              alt=""-->
<!--              style="width: 100%; height: 100%; display: block"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<!--<script lang="ts">-->
<!--  import type { Ref } from 'vue';-->
<!--  import { defineComponent, ref, computed, unref, reactive, toRefs, watch, watchEffect } from 'vue';-->
<!--  import { useTimeoutFn } from '/@/hooks/core/useTimeout';-->
<!--  import { useEventListener } from '/@/hooks/event/useEventListener';-->
<!--  import { sliderProps } from './props';-->
<!--  /**-->
<!--   * VerifySlide-->
<!--   * @description 滑块-->
<!--   * */-->
<!--  import { aesEncrypt } from './../utils/ase';-->
<!--  import { resetSize } from './../utils/util';-->
<!--  import { getCaptcha, verifyCaptcha } from '/@/api/sys/captcha';-->

<!--  export default defineComponent({-->
<!--    name: 'BaseSlideVerify',-->
<!--    components: {},-->
<!--    props: sliderProps,-->
<!--    setup() {-->
<!--      const state = reactive({-->
<!--        secretKey: '', // 后端返回的加密秘钥 字段-->
<!--        passFlag: '', // 是否通过的标识-->
<!--        backImgBase: '', // 验证码背景图片-->
<!--        blockBackImgBase: '', // 验证滑块的背景图片-->
<!--        backToken: '', // 后端返回的唯一token值-->
<!--        startMoveTime: '', // 移动开始的时间-->
<!--        endMoveTime: '', // 移动结束的时间-->
<!--        tipsBackColor: '', // 提示词的背景颜色-->
<!--        tipWords: '',-->
<!--        text: '',-->
<!--        finishText: '',-->
<!--        setSize: {-->
<!--          imgHeight: 0,-->
<!--          imgWidth: 0,-->
<!--          barHeight: 0,-->
<!--          barWidth: 0,-->
<!--        },-->
<!--        top: 0,-->
<!--        left: 0,-->
<!--        moveBlockLeft: undefined,-->
<!--        leftBarWidth: undefined,-->
<!--        // 移动中样式-->
<!--        moveBlockBackgroundColor: undefined,-->
<!--        leftBarBorderColor: '#ddd',-->
<!--        iconColor: undefined,-->
<!--        iconClass: 'icon-right',-->
<!--        iconType: 'right',-->
<!--        status: false, // 鼠标状态-->
<!--        isEnd: false, // 是够验证完成-->
<!--        showRefresh: true,-->
<!--        transitionLeft: '',-->
<!--        transitionWidth: '',-->
<!--      });-->

<!--      const wrapElRef = ref<HTMLDivElement | null>(null);-->

<!--      useEventListener({-->
<!--        el: document,-->
<!--        name: 'mouseup',-->
<!--        listener: () => {-->
<!--          if (state.isMoving) {-->
<!--            resume();-->
<!--          }-->
<!--        },-->
<!--      });-->

<!--      const barArea = computed(() => {-->
<!--        return wrapElRef.value.querySelector('.verify-bar-area');-->
<!--      });-->

<!--      const resetSize = computed(() => {-->
<!--        return resetSize;-->
<!--      });-->

<!--      function init() {-->
<!--        state.text = state.explain;-->
<!--        getPicture();-->
<!--        this.$nextTick(() => {-->
<!--          const setSize = this.resetSize(this); // 重新设置宽度高度-->
<!--          for (const key in setSize) {-->
<!--            this.$set(state.setSize, key, setSize[key]);-->
<!--          }-->
<!--          this.$parent.$emit('ready', this);-->
<!--        });-->

<!--        window.removeEventListener('touchmove', function (e) {-->
<!--          handleMove(e);-->
<!--        });-->
<!--        window.removeEventListener('mousemove', function (e) {-->
<!--          handleMove(e);-->
<!--        });-->

<!--        // 鼠标松开-->
<!--        window.removeEventListener('touchend', function () {-->
<!--          handleEnd();-->
<!--        });-->
<!--        window.removeEventListener('mouseup', function () {-->
<!--          handleEnd();-->
<!--        });-->

<!--        window.addEventListener('touchmove', function (e) {-->
<!--          handleMove(e);-->
<!--        });-->
<!--        window.addEventListener('mousemove', function (e) {-->
<!--          handleMove(e);-->
<!--        });-->

<!--        // 鼠标松开-->
<!--        window.addEventListener('touchend', function () {-->
<!--          handleEnd();-->
<!--        });-->
<!--        window.addEventListener('mouseup', function () {-->
<!--          handleEnd();-->
<!--        });-->
<!--      }-->

<!--      // 鼠标按下-->
<!--      function handleStart(e) {-->
<!--        e = e || window.event;-->
<!--        if (!e.touches) {-->
<!--          // 兼容PC端-->
<!--          var x = e.clientX;-->
<!--        } else {-->
<!--          // 兼容移动端-->
<!--          var x = e.touches[0].pageX;-->
<!--        }-->
<!--        state.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left);-->
<!--        state.startMoveTime = +new Date(); // 开始滑动的时间-->
<!--        if (state.isEnd == false) {-->
<!--          state.text = '';-->
<!--          state.moveBlockBackgroundColor = '#337ab7';-->
<!--          state.leftBarBorderColor = '#337AB7';-->
<!--          state.iconColor = '#fff';-->
<!--          e.stopPropagation();-->
<!--          state.status = true;-->
<!--        }-->
<!--      }-->

<!--      // 鼠标松开-->
<!--      function handleEnd() {-->
<!--        state.endMoveTime = +new Date();-->
<!--        // 判断是否重合-->
<!--        if (state.status && state.isEnd == false) {-->
<!--          var moveLeftDistance = parseInt((state.moveBlockLeft || '').replace('px', ''));-->
<!--          moveLeftDistance = (moveLeftDistance * 310) / parseInt(state.setSize.imgWidth);-->
<!--          const data = {-->
<!--            captchaType: state.captchaType,-->
<!--            pointJson: state.secretKey-->
<!--              ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), state.secretKey)-->
<!--              : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),-->
<!--            token: state.backToken,-->
<!--          };-->
<!--          verifyCaptcha(data).then((res) => {-->
<!--            if (res.success && res.data.repCode == '0000') {-->
<!--              state.moveBlockBackgroundColor = '#5cb85c';-->
<!--              state.leftBarBorderColor = '#5cb85c';-->
<!--              state.iconColor = '#fff';-->
<!--              state.iconClass = 'icon-check';-->
<!--              state.iconType = 'check';-->
<!--              state.showRefresh = false;-->
<!--              state.isEnd = true;-->
<!--              if (state.mode == 'pop') {-->
<!--                setTimeout(() => {-->
<!--                  this.$parent.clickShow = false;-->
<!--                  refresh();-->
<!--                }, 1500);-->
<!--              }-->
<!--              state.passFlag = true;-->
<!--              state.tipWords = `${((state.endMoveTime - state.startMoveTime) / 1000).toFixed(-->
<!--                2,-->
<!--              )}s验证成功`;-->
<!--              var captchaVerification = state.secretKey-->
<!--                ? aesEncrypt(-->
<!--                    state.backToken + '-&#45;&#45;' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),-->
<!--                    state.secretKey,-->
<!--                  )-->
<!--                : state.backToken + '-&#45;&#45;' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });-->
<!--              setTimeout(() => {-->
<!--                state.tipWords = '';-->
<!--                this.$parent.closeBox();-->
<!--                this.$parent.$emit('success', { captchaVerification });-->
<!--              }, 1000);-->
<!--            } else {-->
<!--              state.moveBlockBackgroundColor = '#d9534f';-->
<!--              state.leftBarBorderColor = '#d9534f';-->
<!--              state.iconColor = '#fff';-->
<!--              state.iconClass = 'icon-close';-->
<!--              state.iconType = 'close';-->
<!--              state.passFlag = false;-->
<!--              setTimeout(function () {-->
<!--                refresh();-->
<!--              }, 1000);-->
<!--              this.$parent.$emit('error', this);-->
<!--              state.tipWords = '验证失败';-->
<!--              setTimeout(() => {-->
<!--                state.tipWords = '';-->
<!--              }, 1000);-->
<!--            }-->
<!--          });-->
<!--          state.status = false;-->
<!--        }-->
<!--      }-->

<!--      function getEventPageX(e: MouseEvent | TouchEvent) {-->
<!--        return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;-->
<!--      }-->

<!--      function handleDragStart(e: MouseEvent | TouchEvent) {-->
<!--        if (state.isPassing) {-->
<!--          return;-->
<!--        }-->
<!--        const actionEl = unref(actionElRef);-->
<!--        if (!actionEl) return;-->
<!--        state.moveDistance = getEventPageX(e) - parseInt(actionEl.style.left.replace('px', ''), 10);-->
<!--        state.startTime = new Date().getTime();-->
<!--        state.isMoving = true;-->
<!--      }-->

<!--      // 鼠标移动-->
<!--      function handleMove(e) {-->
<!--        e = e || window.event;-->
<!--        if (state.status && state.isEnd == false) {-->
<!--          if (!e.touches) {-->
<!--            // 兼容PC端-->
<!--            var x = e.clientX;-->
<!--          } else {-->
<!--            // 兼容移动端-->
<!--            var x = e.touches[0].pageX;-->
<!--          }-->
<!--          var bar_area_left = this.barArea.getBoundingClientRect().left;-->
<!--          var move_block_left = x - bar_area_left; // 小方块相对于父元素的left值-->
<!--          if (-->
<!--            move_block_left >=-->
<!--            this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2-->
<!--          ) {-->
<!--            move_block_left =-->
<!--              this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;-->
<!--          }-->
<!--          if (move_block_left <= 0) {-->
<!--            move_block_left = parseInt(parseInt(this.blockSize.width) / 2);-->
<!--          }-->
<!--          // 拖动后小方块的left值-->
<!--          state.moveBlockLeft = move_block_left - state.startLeft + 'px';-->
<!--          state.leftBarWidth = move_block_left - state.startLeft + 'px';-->
<!--        }-->
<!--      }-->

<!--      function refresh() {-->
<!--        state.showRefresh = true;-->
<!--        state.finishText = '';-->

<!--        state.transitionLeft = 'left .3s';-->
<!--        state.moveBlockLeft = 0;-->

<!--        state.leftBarWidth = undefined;-->
<!--        state.transitionWidth = 'width .3s';-->

<!--        state.leftBarBorderColor = '#ddd';-->
<!--        state.moveBlockBackgroundColor = '#fff';-->
<!--        state.iconColor = '#000';-->
<!--        state.iconClass = 'icon-right';-->
<!--        state.iconType = 'right';-->
<!--        state.isEnd = false;-->

<!--        getPicture();-->
<!--        setTimeout(() => {-->
<!--          state.transitionWidth = '';-->
<!--          state.transitionLeft = '';-->
<!--          state.text = state.explain;-->
<!--        }, 300);-->
<!--      }-->

<!--      // 请求背景图片和验证图片-->
<!--      function getPicture() {-->
<!--        const data = {-->
<!--          captchaType: state.captchaType,-->
<!--        };-->
<!--        getCaptcha(data).then((res) => {-->
<!--          if (res.success && res.data.repCode == '0000') {-->
<!--            state.backImgBase = res.data.repData.originalImageBase64;-->
<!--            state.blockBackImgBase = res.data.repData.jigsawImageBase64;-->
<!--            state.backToken = res.data.repData.token;-->
<!--            state.secretKey = res.data.repData.secretKey;-->
<!--          } else {-->
<!--            state.tipWords = res.data.repMsg;-->
<!--          }-->
<!--        });-->
<!--      }-->

<!--      watch(-->
<!--        () => [state.type],-->
<!--        () => {-->
<!--          // type变化则全面刷新-->
<!--          init();-->
<!--        },-->
<!--        {-->
<!--          immediate: true,-->
<!--        },-->
<!--      );-->

<!--      onMounted(() => {-->
<!--        // 禁止拖拽-->
<!--        wrapElRef.value.onselectstart = function () {-->
<!--          return false;-->
<!--        };-->
<!--      });-->

<!--      return {-->
<!--        init,-->
<!--        handleStart,-->
<!--        refresh,-->
<!--        ...toRefs(state),-->
<!--        wrapElRef,-->
<!--      };-->
<!--    },-->
<!--  });-->

<!--  //  "captchaType":"blockPuzzle",-->
<!--</script>-->
